<template>
	<view class="container">
		<!-- 轮播区 -->
		<!-- <custom-banner :bannerList="bannerList"></custom-banner> -->
		<custom-banner></custom-banner>
		<!-- icon导航区 -->
		<!-- <custom-icon :iconList="iconList"></custom-icon> -->
		<custom-icon></custom-icon>
		<!-- 列表区 -->
		<view class="news">
			<view class="news-title">最新供求</view>
			<block v-if="list.length>0">
				<view class="news-item" v-for="(item,index) in list" :key='index'>
					<view @click='goToDetail(item.id)'>
						<view class="item-header">
							<view class="lf">
								<image :src="item.company.logo" mode="" class="lf-image"></image>
								<view class="lf-txt">
									<view class='lf-title'>{{item.company.title + item.id}}</view>
									<view class='lf-title'>{{item.member.username}}</view>
								</view>
							</view>
							<view class="rg">
								<view class="rg-title">{{item.created_at}}</view>
								<view class="circle">{{item.cate.title ? item.cate.title + item.provide_type_txt : item.provide_type_txt}}</view>
							</view>
						</view>
						<view class="item-content">
							{{item.desc}}
						</view>
					</view>
					<view class="item-footer" @click="goMap()">
						<image src="/static/icon/member/set/s7.png" mode="" style="width: 30upx;height: 40upx;"></image>
						<view>{{item.company.address}}</view>
					</view>
				</view>
			</block>

			<blcok v-else>
				<view class="empty">
					<image src="/static/icon/nodata.png" mode=""></image>
				</view>
			</blcok>
		</view>
		<!-- 发布 -->
		<custom-fabu></custom-fabu>
		<!-- 模拟tabbar -->
		<!-- #ifdef APP-PLUS -->
		<custom-tabbar></custom-tabbar>
		<!-- #endif -->
	</view>
</template>
<script>
	import customBanner from '@/components/custom-banner/custom-banner.vue'
	import customTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
	import customIcon from '@/components/custom-icon/custom-icon.vue'
	import customFabu from '@/components/custom-fabu/custom-fabu.vue'
	export default {
		data() {
			return {
				iconList: [],
				list: [],
				bannerList: [],
				page: 1,
				pagesize: 8,
				isMore: false, //默认可以加载更多数据
			}
		},
		onShow() {

		},
		components: {
			customBanner,
			customTabbar,
			customIcon
		},
		onLoad() {
			let token = '04d3c634c8acb0ae57d5c43f8cc22adc';
			uni.setStorageSync('token', token);
			this.getMessageList();
		},
		methods: {


			//加载数据
			getMessageList() {
				if (this.isMore) {
					return false
				}
				this.$untils.request({
					url: 'api/message/index',
					data: {
						'page': this.page,
						'pagesize': this.pagesize
					}
				}).then(res => {
					//没有获取到数据
					if (res.code == -1) {
						this.isMore = true
						this.$untils.toast({
							title: res.msg
						});
						return
					}
					this.list = this.list.concat(res.data);
					if (res.data.length < this.pagesize) {
						this.isMore = true;
						//todo 这里增加告知加载完毕的标识
					}
				})
			},
			//上拉加载
			onReachBottom() {
				this.page++;
				this.getMessageList();
			},
			//详情页面
			goToDetail(id) {
				//跳转到详情页面
				console.log('id:', id);
			}
		}
	}
</script>

<style>
	* {
		color: #545454;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}


	.news {
		display: flex;
		flex-direction: column;
		margin-bottom: 120upx;
	}

	.news-title {
		color: #696969;
		font-size: 40upx;
		border-left: 5px solid #F17B1A;
		padding-left: 20upx;
		margin: 30upx 0;
	}

	.empty {
		margin-top: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty image {
		width: 200upx;
		height: 200upx;
	}

	.news-item {
		width: 100%;
		border-top: 1px solid #F5F5F5;
	}

	.item-header {
		display: flex;
		width: 90%;
		margin: 20upx auto;
	}

	.lf {
		flex: 3;

		display: flex;
	}

	.lf-image {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		webkit-border-radius: 50%
	}

	.lf-txt {
		margin-left: 20upx;
		height: 120upx;
	}

	.lf-title,
	.rg-title {
		margin-bottom: 30upx;
	}

	.rg {
		text-align: right;
	}

	.circle {
		text-align: center;
		background-color: #53A7FD;
		border-radius: 20upx;
		color: #FFFFFF;
		display: inline-block;
		padding: 0 10px;
	}

	.rg-title {
		margin-bottom: 30upx;
	}

	.item-content {
		width: 90%;
		color: #545454;
		margin: 20upx auto;
		text-align: justify;
		text-indent: 30upx;
	}

	.item-footer {
		height: 80upx;
		width: 90%;
		margin: 20upx auto;
		display: flex;
		color: #545454;
		align-items: center;
	}

	.item-footer view {
		margin-left: 20upx;
	}

	.fabu {
		z-index: 9999;
		position: fixed;
		bottom: 160upx;
		right: 60upx;
	}

	.fabu image {
		width: 80upx;
		height: 80upx;
	}

	/* .fix-bottom-nav{
		line-height: 30upx;
		border-top: 1upx solid #A1A1A1;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-around;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20upx 0 0 0;
		background: #FFF;
	}
	.fix-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.fix-item image{
		width: 25px;
		height: 25px;
	}
	.fix-title{
		color:#C8C8C8;
		font-size: 12px;
	} */
</style>
